<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="" />
        <meta name="format-detection" content="telephone=no">
        <title>积分商城</title>
        <link rel="stylesheet" href="../css/slider.css">
        <link rel="stylesheet" href="../css/slider/slider.css">
		<%@ include file="../general.jsp"%>
    </head>
    <body ontouchstart>
        <section class="ui-container">
        <section id="slider">
            <div class="demo-item">
                <div class="demo-block">
                    <div class="ui-slider">
                        <ul class="ui-slider-content" style="width: 300%">
                            <li><img src="../images/banner.png" alt=""></li>
                            <li><img src="../images/banner.png" alt=""></li>
                            <li><img src="../images/banner.png" alt=""></li>
                        </ul>
                    </div>
                    <div class="ui-slider-bottom">
                        <h4>热门兑换</h4>
                        <ul class="bottom_ul" id="list">
                            	
                        </ul>
                        <div style="clear: both;"></div>
                        <div class="loading" id="loading">更多商品</div>
                    </div>
                </div>
            </div>
        </section>
        </section><!-- /.ui-container-->
        <!-- 兑换成功 -->
        <div class="dialog" id="dialog1">
            <div class="dialog_in">
                <h3><img src="../images/x1.png" alt="">兑换成功</h3>
                <p>您已成功兑换<span>娃娃抱枕</span></p>
                <button type="button" class="dialog_btn" id="dialog_btn1" onclick="dialog_btn()">确定</button>
            </div>
        </div> 
        <!-- 兑换失败 -->
        <div class="dialog" id="dialog">
            <div class="dialog_in">
                <h3><img src="../images/x2.png" alt="">兑换失败</h3>
                <p>请先添加您的收货地址</p>
                <button type="button" class="dialog_btn" id="dialog_btn2" onclick="dialog_btn()">确定</button>
            </div>
        </div> 
        <div class="bg" onclick="dialog_bg()"></div> 
        <div class="return_btn">
			<a href="#">
				<div class="return_btn_in">
					<img src="../images/weip.png" alt="">  
					<p>（返回微交易）</p>
				</div>
			</a>
		</div>  
		<input type="hidden" name="${_csrf.parameterName}"  value="${_csrf.token}" />
    </body>
</html>
<!-- banner滚动图 -->
<script class="demo-script">
    (function (){
        var slider = new fz.Scroll('.ui-slider', {
            role: 'slider',
            indicator: true,
            autoplay: true,
            interval: 3000
        });

        slider.on('beforeScrollStart', function(fromIndex, toIndex) {
            console.log(fromIndex,toIndex)
        });

        slider.on('scrollEnd', function(cruPage) {
            console.log(cruPage)
        });
    })();
</script>
<script>

function dialog(productId){
   // $("#dialog").show();
   // $(".bg").show();
	$.ajax({
		type : 'POST',
		url : "productExchange.do",
		data : {
			"productId" : productId,
			"_csrf" : $('[name="_csrf"]').val()
		},
		async : 'true',
		dataType : 'json',
		success : function(data){
			var res = data.result.result;
			if(res==1){
				alert("兑换成功");
			}else{
				alert(data.result.message);
				if(data.result.message=="请填写默认收货地址")
					window.location.href="../member/address.do";
			}
		}
	});
}
function dialog_btn(){
    $("#dialog").hide();
    $(".bg").hide();
}
function dialog_bg(){
    $("#dialog").hide();
    $(".bg").hide();
}

$(function(){
	productPage(1);
});

function productPage(currentPage){
	$.ajax({
		type : 'POST',
		url : "getProductList.do",
		data : {
			"offset" : currentPage,
			"_csrf" : $('[name="_csrf"]').val()
		},
		async : 'true',
		dataType : 'json',
		success : function(data){
			var rec = data.item.resultList;
			var html = "";
			for(i = 0; i < rec.length; i++){
				html +="<li>";
                html +="<img src='../images/li1.png' alt=''>"; 
                html +="<div class='ul_in'>";
                html +="<div class='ul_left'>";    
                html +="<p>"+rec[i].productName+"</p>";        
                html +="<p><span>"+rec[i].credits+"</span>积分</p>";      
                html +="</div>";
                if(rec[i].isBuy==true)
                	html +="<div class=\"ul_right\"><a href=\"#\" onclick=\"dialog('"+rec[i].productId+"')\">兑换</a></div>";
                else
                	html +="<div class='ul_right hui'><a href='#' style='color: #fff'>兑换</a></div>";
                html +="</div>";
            	html +="</li>";
			}
			$("#list").append(html);
			
			if(data.item.currentPage>=data.item.nextPage)
				$("#loading").html("<a href='#'>所有商品加载完</a>");
			else
			$("#loading").html("<a href=\"javascript:productPage("+data.item.nextPage+");\">更多商品</a>");
		}
	});
}
</script>